<template>
  <!-- 首页快捷入口 -->
  <div class="dashboard-fastmenu">
    <div class="side-header">便捷</div>
    <div class="fast-menu-container">
      <div class="fast-menu-bar">
        <!-- 每个菜单的分组 -->
        <span
          class="fast-menu-group"
          v-for="item in filteredMenuJson"
          :key="item.id"
        >
          <!-- 每一组的单个菜单 -->
          <span
            class="fast-menu-group-item"
            v-for="menu in item.children"
            :key="item.id"
            @click="
              () => {
                const path = item.path + '/' + menu.path;
                const query = menu.id === 5 ? { dialog: 'true' } : {};
                router.push({
                  path,
                  query, // 添加路由参数
                });
              }
            "
          >
            <div :style="{ minHeight: menu.iconFont ? 'auto' : '28px' }">
              <i :class="['iconfont', menu.iconFont]"></i>
            </div>
            <p>{{ menu.meta.title }}</p>
          </span>
        </span>
      </div>
    </div>
    <div class="btn-custom">
      <div @click="openFastMenuDialog">
        <i class="iconfont icon-icon_plus"></i>
      </div>
    </div>
  </div>
  <!-- 快捷菜单弹窗 -->
  <fastMenuDialog
    ref="sortChatRef"
    style="width: 900px"
    :menuJson="menuJson"
    @updateMenuList="updateMenuList"
    v-model:centerDialogVisible="centerDialogVisible"
  />
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';
import dashboard from '@/modules';
const { getFastMenuApi } = dashboard;
import { MenuItem } from '@/types/dashboard/fastmenu/index';
import fastMenuDialog from '@/views/components/fastMenuDialog/index.vue';
import { useRouter } from 'vue-router';
// 全局路由守卫
const router = useRouter();

const sortChatRef = ref(null);
const centerDialogVisible = ref(false);
// 快捷菜单数据
const menuJson = ref<MenuItem[]>([]);
// 打开弹窗
const openFastMenuDialog = () => {
  centerDialogVisible.value = true;
};
// 更新数据
const updateMenuList = (ids: any) => {
  getFastMenu({ ids });
};
// 获取菜单
const getFastMenu = async (params: any) => {
  const { data } = await getFastMenuApi(params);
  menuJson.value = data;
};
// 过滤后的数据
const filteredMenuJson = computed(() =>
  menuJson.value
    .filter((item) => item.is_pick) // 筛选顶层 is_pick
    .map((item) => ({
      ...item,
      children: item.children?.filter((menu) => menu.is_pick) || [], // 筛选子级 is_pick
    }))
);

onMounted(() => {
  getFastMenu({});
});
</script>
<style lang="scss" scoped src="./index.scss"></style>
